<template>
  <div>
    <div>
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
        label-position="right"
      >
        <el-form-item label="科目">
          <el-radio-group v-model="subject">
            <el-radio
              v-for="(v,i,k) in subjects"
              :key="k"
              :label="v.val"
            >
              {{ v.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="输入框类型">
          <el-radio-group v-model="fillMode">
            <el-radio
              v-for="(v,i,k) in fillModes"
              :key="k"
              :label="v.val"
            >
              {{ v.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="键盘模式">
          <el-radio-group v-model="defaultMode">
            <el-radio
              v-for="(v,i,k) in defaultModes"
              :key="k"
              :label="v.val"
            >
              {{ v.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="键盘类型">
          <el-radio-group v-model="boardType">
            <el-radio
              v-for="(v,i,k) in boardTypes"
              :key="k"
              :label="v.val"
            >
              {{ v.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="空1">
          <Iminputdiv
            :num="-1"
            group="a"
            :rightAnswers="['μ']"
            :board-model="boardModel"
            :subject="subject"
          />
        </el-form-item>
        <el-form-item label="空2">
          <Iminputdiv
            :num="-1"
            group="a"

            :board-type="boardType"
            :board-model="boardModel"
            :subject="subject"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

// import utils from '../libs/utils.js';

export default {
    name: 'Pad',
    data: function () {
        return {
            fillModes: [{ 'name': '特殊符号', val: 'special' }, { 'name': '客观', val: 'objective' }, { 'name': '主观', val: 'subjective' }],
            fillMode: 'objective',
            defaultModes: [{ 'name': '键盘', val: 0 }, { 'name': '手写', val: 1 }, { 'name': '笔迹', val: 2 }],
            defaultMode: 0,
            subjects: [{ 'name': '数学', val: 1 }, { 'name': '语文', val: 2 }, { 'name': '英语', val: 3 }],
            subject: 2,
            boardTypes: [{ 'name': '通用', val: 'public' }, { 'name': '数字', val: 'number' }, { 'name': '手写', val: 'handwriter' }, { 'name': '符号', val: 'symbol' }],
            boardType: 'number',
            pcWords: '',
            padWords: '',
            form: {},
            group: 9,
            boardModel: 'chinese',
            inputarray: [
                [],
                [],
            ],
        }
    },
    watch: {
        form: {
            handler: function (val, older) {

            },
            deep: true, // 对象的深度验证
        },
        boardType: {
            handler: function (val, older) {
                if (val === 'symbol') {

                }
            },
            deep: true, // 对象的深度验证
        },
    },
    mounted () {

    },
    methods: {
        // insertKey (val) {
        //     var self = this;
        //     if (val === 'delete') {
        //         self.pcWords = self.pcWords.substr(0, self.pcWords.length - 1);
        //     } else {
        //         self.pcWords += val;
        //     }
        // },
        // openQtiPc () {
        //     let imparam = {
        //         rightAnswers: [],
        //         subject: this.subject,
        //         fillMode: this.fillMode,
        //         defaultMode: this.defaultMode,
        //         change: (key) => {
        //             console.log(key);
        //             if (key.type === 'openMode') {
        //                 if (key.data !== 3) this.openMode = key.data;
        //                 return;
        //             }
        //             this.insertKey(key);
        //         },
        //         closed: function () {
        //             console.log('closed');
        //         },
        //     };
        //     window.linpengKeyBoard.open(imparam);
        // },

        // openQtiPad () {
        //     let imparam = {
        //         rightAnswers: [],
        //         subject: this.subject,
        //         fillMode: this.fillMode,
        //         defaultMode: this.defaultMode,
        //         change: (key) => {
        //             console.log(key);
        //             if (key.type === 'openMode') {
        //                 if (key.data !== 3) this.openMode = key.data;
        //                 return;
        //             }
        //             this.insertKey(key);
        //         },
        //         closed: function () {
        //             console.log('closed');
        //         },
        //     };
        //     window.linpengKeyBoard.open(imparam);
        // },
        // close () {
        //     return false;
        //     // setTimeout(() => {
        //     //     window.linpengKeyBoard.closed();
        //     // }, 500);
        // },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  font-size: 14px;
}
  .el-form {
    padding-bottom: 500px;
  }
</style>
